/**
 * modal-wrapper 为 modal 组件包容容器]
* @time 2016-04-28 14:40
 */
@mixin modal-wrapper() {
	display: none;
	width: 100%;
	height: 100%;
	top: 0; left: 0;
	position: absolute;

	.modal-item {
		width: 100%;
		height: 100%;
		overflow: hidden;
		display: none;
		position: absolute;

		.back {
			width: 100%;
			height: 100%;
			background-color: $modal-item-back;
		}
	}
}

/**
 * modal 为具体的 modal 组件样式
 * @time 2016-04-28 14:40
 */
@mixin modal() {
    position: absolute;
    left: 50%;
    display: flex;
    z-index: 10;
    flex-direction: column;
    transform: translateX(-50%);
    background-color: $modal-wrapper-back;

    &.full {
        width: 100%;
        height: 100%;
    }

    &.center {
        top: 50%;
        transform: translate(-50%, -50%);
    }

    &.top {
        top: 0;
    }

    &.bottom {
        bottom: 0;
    }
}
